<template>
  <div class="cms-grid" :class="`style_${type}`">
    <div class="hit">
      <span class="hot-play" v-if="!showTitle">{{ title || '重磅热播' }}</span>
      <div class="more" v-if="!title || !moreShow">
        <span>更多</span>
        <right-outlined class="ml-[6px]" />
      </div>
    </div>

    <div class="video-grid">
      <div class="video" v-for="(item, index) in 6" :key="index">
        <div class="video_shadow">
          <img :src="homeIcons.film" alt="" class="img-show" />
          <p class="episodes dome-text">集数</p>
        </div>
        <star-outlined v-if="type === 2 && !(index % 2 === 0)" class="text-[#fff] absolute top-[7px] left-[7px]" />
        <star-filled v-if="type === 2 && index % 2 === 0" class="text-orange-400 absolute top-[7px] left-[7px]" />
        <p class="title">影片名称</p>
        <p v-if="showTitle" class="text-xs text-[#8F9299]">饰 角色</p>
        <p class="des" v-else>影片大概描述</p>
        <div v-if="index % 2 === 0" class="free">免费</div>
        <div v-else class="gold">
          <dollar-outlined class="gold-icon" />
          <span>100</span>
        </div>
      </div>
    </div>
    <div class="flex justify-center text-center mt-6" v-if="!title">
      <sync-outlined class="text-[#ff512b] mr-2" />
      <span class="text-[#848494] text-xs">换一换</span>
    </div>
  </div>
</template>

<script lang="ts">
import { defineComponent } from 'vue'
import cmsGridViewProps from './props'
import homeIcons from '../../assets'
import { DollarOutlined, RightOutlined, StarOutlined, SyncOutlined, StarFilled } from '@ant-design/icons-vue'

export default defineComponent({
  props: cmsGridViewProps,
  setup() {
    return {
      homeIcons
    }
  },
  components: {
    DollarOutlined,
    RightOutlined,
    StarOutlined,
    SyncOutlined,
    StarFilled
  }
})
</script>
<style lang="less">
.cms-grid {
  width: 375px;
  padding: 4px 16px;
  background: #f6f8fb;
  .hit {
    @apply flex justify-between;
  }
  .hot-play {
    font-size: 16px;
    color: #000;
  }
  .more {
    font-size: 12px;
    color: #848494;
    text-align: center;
    align-self: center;
    font-weight: 400;
    // margin-right: 20px;
  }
  .img-show {
    object-fit: cover;
  }
  .video-grid {
    overflow: hidden;
    @apply flex flex-wrap gap-x-4 gap-y-6 mt-4;
  }
  .episodes {
    font-size: 12px;
    color: #fff;
    text-align: right;
    position: absolute;
    top: 70px;
    right: 8px;
  }
  .title {
    font-size: 14px;
    color: #000000;
    letter-spacing: 0;
    text-align: left;
    font-weight: 500;
    margin-top: 8px !important;
    margin-bottom: 4px !important;
  }
  .des {
    font-size: 12px;
    text-align: left;
    color: #848494;
    font-weight: 400;
    @apply mb-0;
  }
  .free {
    width: 36px;
    height: 20px;
    background-image: linear-gradient(135deg, #ffa45d 0%, #ff613f 100%);
    border-radius: 0 8px 0 8px;
    font-size: 12px;
    color: #ffffff;
    padding: 2px 6px;
    position: absolute;
    right: 0;
    top: 0;
  }
  .gold {
    // width: 48px;
    height: 20px;
    background-image: linear-gradient(135deg, #eed78e 0%, #cbae6c 100%);
    border-radius: 0 8px 0 8px;
    font-size: 12px;
    color: #ffffff;
    padding: 2px 6px;
    position: absolute;
    right: 0;
    top: 0;
  }
  .gold-icon {
    margin-right: 2px;
    font-size: 14px;
  }
  &.style_1 {
    .video {
      width: 163px;
      position: relative;
    }
    .video_shadow {
      width: 163px;
      height: 92px;
      .img-show {
        width: 51px;
      }
    }
  }
  &.style_2 {
    .video {
      width: 163px;
      position: relative;
    }
    .video_shadow {
      width: 163px;
      height: 218px;
      border-radius: 8px;
    }
    .episodes {
      font-size: 12px;
      color: #fff;
      text-align: right;
      position: absolute;
      top: 194px;
      right: 8px;
    }
  }
  &.style_3 {
    .video-grid {
      overflow: hidden;
      @apply flex flex-wrap gap-x-2 gap-y-4 mt-4;
    }
    .video {
      width: 109px;
      position: relative;
    }
    .video_shadow {
      width: 109px;
      height: 146px;
      border-radius: 8px;
      .img-show {
        width: 51px;
      }
    }
    .episodes {
      font-size: 12px;
      color: #fff;
      text-align: right;
      position: absolute;
      top: 122px;
      right: 8px;
    }
    .des {
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
    }
  }
}
</style>
